<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./pro1.css" /> -->
    <link rel="stylesheet" href="./pro2.css" />
    <!-- <link rel="stylesheet" href="./pro3.css" /> -->
    <!-- <link rel="stylesheet" href="./pro4.css"> -->
    <!-- <link rel="stylesheet" href="./pro5.css" /> -->
    <!-- <link rel="stylesheet" href="./pro6.css"> -->
    <!-- <link rel="stylesheet" href="./pro7.css"> -->
    <!-- <link rel="stylesheet" href="./pro8.css"> -->
    <!-- <link rel="stylesheet" href="./pro9.css" /> -->
    <!-- <link rel="stylesheet" href="./pro10.css"> -->
    <!-- <link rel="stylesheet" href="./pro11.css"> -->
    <!-- <link rel="stylesheet" href="./pro12.css"> -->
  </head>

  <body>
    <!-- 1. 编写一个 CSS 选择器，选择列表中的第一个列表项，并将其背景颜色设置为浅灰色。 -->
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>

    <!-- 2. 创建一个规则，使得表格中的每一行（除了第一行）的背景颜色交替显示，一行浅灰色，下一行白色。 -->

    <!-- <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table> -->

    <!-- 3. 设计一个样式，使得每个 div 中的最后一个段落的文本颜色为红色。 -->
    <!-- <div>
          <p>你好1</p>
          <p>你好2</p>
        </div>
      <div>
          <p>你好1</p>
          <p>你好2</p>
        </div>
      <div>
          <p>你好1</p>
          <p>你好2</p>
        </div> -->

    <!-- 4. 编写一个选择器，选择表格中的最后一列，并将其背景颜色设置为淡蓝色。 -->
    <!-- <table>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
        </table> -->

    <!-- 5. 使用结构伪类选择器选中第一个输入框，并将其边框颜色设置为绿色。 -->
    <!-- <div>
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </div> -->

    <!-- 6. 创建一个规则，选中每个父元素下的第二个子元素，并将其字体加粗。 -->
    <!-- <div class="content">
          <div>
              <span>你好1</span>
              <span>你好2</span>
              <span>你好3</span>
            </div>
          <p>
              <span>你好1</span>
              <span>你好2</span>
              <span>你好3</span>
           </p>
          <div>
              <p>你好1</p>
              <p>你好2</p>
              <p>你好3</p>
            </div>
       
  </div> -->
    <!-- 7. 创建一个规则，选中列表中的偶数行，并将它们的文本颜色设置为蓝色。 -->
    <!-- <table>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
              <td>7</td>
              <td>8</td>
            </tr>
  </table> -->
    <!-- 8. 编写一个选择器，选择每个表格中第二行第三列的单元格，并将其背景颜色设置为黄色。 -->
    <!-- <table>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
           </tr>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
            </tr>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
            </tr>
        </table> -->
    <!-- 9. 设计一个样式，使得每个含有 `.special` 类的段落的下一个兄弟元素（紧邻的下一个同级元素）的背景颜色为粉红色。 -->
    <!-- <div>
           
      <p class="special">你好1</p>
           
      <p>你好2</p>
           
      <p>你好3</p>
           
      <p>你好4</p>
    </div> -->

    <!-- 10. 创建一个规则，选中列表中倒数第二个列表项，并将其文本颜色设置为橙色。 -->
    <!-- <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
  </ul> -->
    <!-- 11. 使用结构伪类选择器选中第一个段落中的第一个字，并将其文本颜色设置为红色。 -->

    <!-- <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p>
  <p>123</p> -->

    <!-- 12. 编写一个选择器，选择每个表格中最后一行的所有单元格，并将它们的边框设置为实线。 -->
    <!-- <table>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
           </tr>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
            </tr>
          <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
            </tr>
        </table> -->
  </body>
</html>
